<template>
	<view class="item">
		<view style="display: inline-flex; justify-content: flex-end;">
			<text class="title">
				订单号：{{order.orderNo}}
			</text>
			<!-- <view class="btn-detail" style="background-color:#FFFFFF;display: flex;flex-direction: row-reverse;">
				<u-icon name="arrow-right"></u-icon>
			</view> -->
		</view>

		<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

		<view class="text-line">
			<text class="text-name">客户姓名:</text>
			<text class="text-value">{{order.memberName|filterNull}}</text>
			<view style="color: #00bfbf;background-color:#FFFFFF;min-width:220rpx;text-align: center;">
				{{order.orderStatus|shortOrderStatus}}
			</view>
		</view>

		<view class="text-line">
			<text class="text-name">客户类型:</text>
			<text class="text-value">{{order.memberType|customerType}}</text>
		</view>

		<view class="text-line">
			<text class="text-name">联系方式:</text>
			<text class="text-value">{{order.memberPhone|filterNull}}</text>
		</view>

		<view class="text-line">
			<text class="text-name">预定车辆:</text>
			<text class="text-value">{{order.modelName|filterNull}}</text>
		</view>

		<view>
			<view class="text-line">
				<view class="text-value start-time"><span class="type-tag">预-取</span>{{order.rentalStartTime}}</view>
				<view class="text-value end-time"><span class="type-tag">预-还</span>{{order.rentalEndTime}}</view>
			</view>
		</view>
		<view>
			<view class="text-line">
				<view class="text-value start-time"  v-if="order.actualStartTime"><span class="type-tag">实-取</span>{{order.actualStartTime}}</view>
				<view class="text-value end-time" v-if="order.actualEndTime"><span class="type-tag">实-还</span>{{order.actualEndTime}}</view>
			</view>
		</view>
		<u-line color="#efefef" ></u-line>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		props: {
			order: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 0px;
		padding: 20rpx;
	}

	.title {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		/* 这里是超出几行省略 */
		overflow: hidden;
		
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.flex-item {
		flex: 1
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #f59a23;

		.type-tag {
			background-color: #f59a23;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}

	.start-time {
		color: #e65a6b;

		.type-tag {
			background-color: #e65a6b;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}
</style>
